<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">平台</el-breadcrumb-item>
      <el-breadcrumb-item>管理员管理</el-breadcrumb-item>
      <el-breadcrumb-item>管理员列表</el-breadcrumb-item>
    </el-breadcrumb>
    
    
    <!-- 卡片视图区 -->
    <el-card class="box-card" stripe style="width: 100%">
      <el-row :gutter="20">
        <el-col :span="8"
          ><el-input
            placeholder="请输入内容"
            v-model="addAdminData.keyword"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getuser()"
            ></el-button> </el-input
        ></el-col>
        <el-col :span="4">
          <el-button type="primary" @click="showAddAdmin()">添加管理员</el-button>
        </el-col>
      </el-row>
      <!-- 用户列表区域 -->
      <el-table :data="userlist" stripe style="width: 100%" >
      	
        <!--<el-table-column type="index"> </el-table-column>-->
        <el-table-column prop="id" label="id" width="180"></el-table-column>
        <el-table-column prop="username" label="用户名" width="180"> </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180"> </el-table-column>
        <el-table-column prop="nickname" label="昵称"> </el-table-column>
        <el-table-column prop="role_name" label="角色"> </el-table-column>
         
        <el-table-column label="操作">
        <template slot-scope="scope">
          <i class="el-icon-edit" size="mini" ></i> &nbsp;
          <i class="el-icon-delete" size="mini" ></i>
        </template>
       </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination  :current-page="1" @size-change="handleSizeChange"  @current-change="handleCurrentChange"
        :page-sizes="[2, 3, 5, 10]"   :page-size="2" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
    
     <!--添加管理员弹窗-->
    <el-dialog title="添加管理员" :visible.sync="isShowAddAdmin">
      <el-form :model="addAdminData">
        <el-form-item label="用户名">
          <el-input v-model="addAdminData.username" autocomplete="off" label-width="10px"></el-input>
        </el-form-item>
         <el-form-item label="昵 称">
          <el-input v-model="addAdminData.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="addAdminData.password" autocomplete="off"></el-input>
        </el-form-item>
          <el-form-item label="确认密码密码">
          <el-input v-model="addAdminData.secondpsd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="addAdminData.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="addAdminData.role_id" placeholder="请选择角色">
            <el-option
              v-for="role_v in roleList"
              :key="role_v.id"
              :label="role_v.role_name"
              :value="role_v.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowAddAdmin = false">取 消</el-button>
        <el-button type="primary" @click='addRoleAdmin()'>确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改管理员弹窗 -->
    <!--<el-dialog title="修改管理员" :visible.sync="isShowEditAdmin">
      <el-form :model="editAdminData">
        <el-form-item label="管理员">
          <el-input v-model="editAdminData.username" disabled autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="editAdminData.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="editAdminData.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="editAdminData.role_id" placeholder="请选择角色">
            <el-option
              v-for="role_v in roleList"
              :key="role_v.id"
              :label="role_v.role_name"
              :value="role_v.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowEditAdmin = false">取 消</el-button>
        <el-button type="primary" @click="editAdmin">确 定</el-button>
      </div>
    </el-dialog>-->
  </div>
</template>

<script>
		import axios from "axios";
		export default {
		  data() {
		    return {
		    	// 添加管理员弹窗
      		isShowAddAdmin: false,
      		roleList: [{'id':1,'role_name':'超级管理员'},
      							{'id':2,'role_name':'主管'},
      							{'id':3,'role_name':'经理'},
      							{'id':10,'role_name':'组长'},
      							{'id':11,'role_name':'测试角色'}
      							],
      		
		      addAdminData: {
		      	 username: '',
             password:'',
             secondpsd: '',
             nickname:'',
              email:'',
            role_id: '',
		        page: 1,
		        keyword: "",
		        //每页显示条目数
		        pageSize:'2',
		      },
		      userlist: [],
		      //总条数
		      total:0,
		      
		    }
		  },
		  methods: {
		  	 // 添加管理员弹窗
	    showAddAdmin() {
	      //   控制弹窗
	         this.isShowAddAdmin = true;
	    },
	    addRoleAdmin(){
	    	 axios.post('http://adminapi.pyg.com/save',this.addAdminData).then((res)=>{
	    	 		var {code ,data, msg}=res.data;
	    	 		if(code==200 && msg=='success'){
	    	 			  this.$message({
                 message: '注册成功',
                 type: 'success'
             });
             this.isShowAddAdmin = false;
	    	 		}else{
	    	 			this.$message.error(msg);
	    	 		}
	    	 })
	    },

		 getuser() {
		      //  获取用户列表
		      axios.get("http://adminapi.pyg.com/admin", { params: this.addAdminData })
		        .then((res) => {
		          // console.log(res);
		          if (res.data.code !== 200 || res.data.msg != "success") {
		            return this.$message.error("获取用户列表失败");
		          }
		          var { data } = res.data;
		//        console.log(data);
		          this.userlist = data.data;
		          //总条数
		          this.total=data.total;
		        });
		    },
		    //监听pagesize改变时间
		    handleSizeChange(newsize){
		      // console.log(newsize);
		      this.addAdminData.pageSize=newsize;
		      this.getuser();
		    },
		    handleCurrentChange(val){
		//  	console.log(val);
					this.addAdminData.page=val;
					
					this.getuser();
		    }
		  },
		  mounted() {
		    this.getuser();
		  },
		};
</script>

<style>
.el-row {
  margin-top: 10px;
}
</style>
